<template>
	<s-pull-scroll class="s-pull-scroll wrap" :down-offset="120" showDownSuccess="true" ref="pullScroll"
		:pullDown="pullDown">
		<view class="page-main">
			<view class="wrap">
				<!--			选项卡START -->
				<view class="u-tabs-box">
					<u-tabs-swiper style="margin-bottom: 8px" activeColor="#004fbf" ref="tabs" :list="list"
						:current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>

				<!--			选项卡END  -->
				<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
					@animationfinish="animationfinish">
					<!--	 一个tab 租			-->

					<swiper-item class="swiper-item">
						<scroll-view scroll-y @scrolltolower="reachBottom" class="scroll_view follow-scroll">
							<view class="page-box">
								<view class="follow-list">
									<view v-for="(item, index) in followList" :key="item.id">
										<view>
											<my-house-card @cancelFollowDone="initPageData" :meta="{ is_follow: 1 }"
												:tag-name="'租'" :item="{
                          ...item.house,
                          is_out: item.is_out
                        }"></my-house-card>
										</view>
									</view>
								</view>
							</view>
							<uni-load-more v-show="showLoading" class="loadMore" :status="status" :icon-size="12"
								:content-text="contentText" />
						</scroll-view>
					</swiper-item>

					<!--	 一个tab 租 END 			-->
					<!--	 售tab START-->
					<swiper-item class="swiper-item">
						<scroll-view class="scroll_view follow-scroll" scroll-y @scrolltolower="reachBottom">
							<view class="page-box">
								<view class="follow-list">
									<view v-for="(item, index) in followList2" :key="item.id">
										<view style="background-color: white">
											<my-house-card @cancelFollowDone="initPageData" :meta="{ is_follow: 1 }"
												:tag-name="'售'" :item="{
                          ...item.house,
                          is_out: item.is_out
                        }"></my-house-card>
										</view>
									</view>
								</view>
							</view>
							<uni-load-more v-show="showLoading" class="loadMore" :status="status2" :icon-size="12"
								:content-text="contentText2" />
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<!--    <not-logged-in ></not-logged-in>-->
		</view>
	</s-pull-scroll>
</template>

<script>
	import {
		filter
	} from '@/util/reuse/filter';
	import myHouseCard from '../../components/myHouseCard';
	import {
		tokenRequest
	} from '../../util/network';
	import {
		appMixin,
		pullDownRefresh,
		resetDataForPullDown,
	} from '../../util/reuse';
	import notLoggedIn from '../../components/notLoggedIn';
	import {
		authRouterGuard,
		didntLoggedIn
	} from '../../util/funcs';
	import {
		USER_ORIENTED
	} from '../../util/config';
	import {
		failCbObject
	} from '../../util/commonFuncs';

	export default {
		mixins: [filter, appMixin, pullDownRefresh],
		data() {
			return {
				showLoading: true,
				status: 'loading', // 与下面一一对应
				contentText: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多', // nomore
				},
				status2: 'loading', // 与下面一一对应
				contentText2: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多', // nomore
				},
				pagi: {
					page: 1,
					pageSize: 7,
				},
				pagi2: {
					page: 1,
					pageSize: 7,
				},
				hasLoggedIn: true,
				list: [{
						name: '写字楼 (租)',
					},
					{
						name: '写字楼 (售)',
					},
				],
				// followList: [{house: {},}],
				followList: [],
				followList2: [],
				// followList2: [{house: {},}],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				// 分页专用
			};
		},
		components: {
			myHouseCard,
			notLoggedIn
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return (val) => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return (val) => {};
			},
		},
		methods: {
			pullDown(pullScroll) {
				this.showLoading = false;
				let timeout = this.pullTesting ? 10000 : 400;
				setTimeout(async () => {
					if (typeof this.initPageData === 'function') {
						await this.initPageData();
						pullScroll.success();
						this.showLoading = true;
					}
				}, timeout);
			},
			reachBottom() {
				// console.log('scroll bottom');
				let type = this.swiperCurrent + 1;
				if (type === 1) {
					this.pagi.page += 1;
				} else {
					this.pagi2.page += 1;
				}
				this.getListData(type);
			},
			// 页面数据
			getListData(type, toReset = false) {
				//页面初始化获取预约
				let url = USER_ORIENTED ? '/follow_list' : '/user_follow';
				return new Promise((resolve, reject) => {
					if (type === 1) {
						if (this.status === 'nomore') return;
						this.status = 'loading';
						tokenRequest(
							url, {
								type: type,
								...this.pagi,
							}, {
								success: ({
									data
								}) => {
									let list = data.data;
									if (list.length < this.pagi.pageSize) {
										this.status = 'nomore';
									} else {
										this.status = 'more';
									}
									if (!toReset) {
										this.followList = this.followList.concat(list);
									} else {
										this.followList = list;
									}
									// console.log('followList: ', this.followList);

									resolve();
								},
								...failCbObject('请检查您的网络', (res) => {
                  this.status = 'nomore';
									reject(res);
								}),
							}
						);
					} else {
						if (this.status2 === 'nomore') return;
						this.status2 = 'loading';
						tokenRequest(
							url, {
								type: type,
								...this.pagi2,
							}, {
								success: ({
									data
								}) => {
									let list = data.data;
									if (list.length < this.pagi2.pageSize) {
										this.status2 = 'nomore';
									} else {
										this.status2 = 'more';
									}
									if (!toReset) this.followList2 = this.followList2.concat(list);
									else this.followList2 = list;

									resolve();
								},
								...failCbObject('请检查您的网络', (res) => {
                  this.status2 = 'nomore';
									reject(res);
								}),
							}
						);
					}
					resolve();
				})
			},

			// 总价
			totalPrice(item) {},
			// 总件数
			totalNum(item) {},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			async initPageData(successCb) {
				if (didntLoggedIn(false)) {
					this.followList = [];
					this.hasLoggedIn = false;
					this.status = 'nomore';
					this.status2 = 'nomore';
					this.contentText.contentnomore = '请先登录';
					this.contentText2.contentnomore = '请先登录';
					return;
				}

				resetDataForPullDown.call(this);
				await Promise.all([
					this.getListData(1),
					this.getListData(2)
				])
				// console.log('success', this.$refs.pullScroll)

				if (typeof successCb === 'function') successCb();
			},
			// 设置需要显示的字体 deprecated: 因为直接弹到用户登录页就好了
			setPageText() {},
		},

		onShow() {
			// console.log('on show')
			this.status = 'nomore'
			this.status2 = 'nomore'
			let pro = authRouterGuard(this).then((res) => {
				this.initPageData();
			});
		},
		onHide() {
			Object.assign(this.$data, this.$options.data()); //  清空页面数据
		},
	};
</script>

<style lang="scss" scoped>
	@import '../../assets/styles/global';

	.page-main {
		overflow-y: hidden;
		background-color: white;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
		background-color: white;
		/*padding:36rpx 32rpx ;*/
		padding-left: 15px;
		padding-right: 15px;
		margin-bottom: -5px;
		@include center;
		flex-direction: column;
		/*width: 100%;*/
		/*height: 100%;*/

		.scroll_view {
			width: 100%;
			height: 100%;
			/*padding-bottom: 10px;*/
		}

		.page-box {}
	}

	.follow-scroll {
		/*padding-top: 8px;*/
	}

	.swiper-item {
		height: 100%;
	}
</style>
